import './TableImage.scss';
import { defineComponent, ref, computed } from 'vue';
import type { PropType } from 'vue';
import { ElImage } from 'element-plus';
export default defineComponent({
    name: 'TableImage',
    props: {
        row: {
            type: Array as PropType<any>,
            default: () => null
        }
    },
    setup({ row }) {
        const image_default_logo = ref<string>(
            'https://img.static-keyid.cn/toolspace/scrm/2023/09/16957192102834z1kkp6piit8zpzb.png'
        );
        const isShowPoint = computed(() => row?.mediaFileInfo?.length > 1);
        return {
            isShowPoint,
            image_default_logo
        };
    },
    render() {
        const slotError = <ElImage src={this.image_default_logo} fit="cover" />;
        return (
            <div class={this.isShowPoint ? 'content-image point' : 'content-image'}>
                {this.row?.mediaFileInfo?.length ? (
                    <>
                        <div v-show={this.isShowPoint} class={'num'}>
                            {this.row.mediaFileInfo.length}
                        </div>
                        <ElImage
                            preview-teleported
                            vSlots={{ error: slotError }}
                            src={this.row.mediaFileInfo[0].absolute_url || this.image_default_logo}
                            preview-src-list={this.row.mediaFileInfo.map(item => item.absolute_url)}
                            onClick={e => e.stopPropagation()}
                            fit="cover"
                        />
                    </>
                ) : (
                    '--'
                )}
            </div>
        );
    }
});
